<template>
    <div class="mainItem">
        <div class="boxmock" v-loading="loading" v-if="loading" :class="loading ? 'blurView' : ''"></div>

        <div class="chartV">
            <div id="mc3V" ref="mc3V"></div>
        </div>

        <div class="tableV">
            <div class="tableVt">
                <div :class="['tableVti', 'tableVti' + o]" v-for="(i, o) in tableT" :key="o">{{ i }}</div>
            </div>
            <div class="tableVc">
                <el-carousel height="270px" direction="vertical" :autoplay="true" :loop="true" :interval="5000"
                    indicator-position='none'>
                    <el-carousel-item v-for="(n, m) in groupedItems" :key="m">
                        <div class="tableVcis" v-for="(i, o) in n" :key="o">
                            <div class="tableVci tableVci0">{{ i.index }}</div>
                            <div class="tableVci tableVci1">{{ i.name }}</div>
                            <div class="tableVci tableVci2">{{ i.sex }}</div>
                            <div class="tableVci tableVci3">{{ cardHide(i.idCard) }}</div>
                            <div class="tableVci tableVci4">{{ phoneHide(i.phone) }}</div>
                            <div class="tableVci tableVci5">{{ i.kes }}</div>
                            <div class="tableVci tableVci6">{{ i.date }}</div>
                        </div>
                    </el-carousel-item>
                </el-carousel>

            </div>
        </div>

        <img class="mainItem-footer" src="@/assets/l.png" alt="">
    </div>
</template>

<script>
import { fetchGet } from '@/api/request'
export default {
    props: ['hIndex', 'dIndex', 'mIndex'],
    data() {
        return {
            loading: false,
            mc3V: null,
            tableT: ['序号', '姓名', '性别', '身份证号码', '联系方式', '业务科室', '时间'],
            tableC: [
                { name: '张三1', sex: '男', idCard: '37110219980212002X', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三2', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三3', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三4', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三5', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三6', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三7', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三8', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三9', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三10', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三11', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三12', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三13', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三14', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三22', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
                { name: '张三33', sex: '男', idCard: '371102199802120021', phone: '13322331234', kes: '放射科', date: '2024-04-12 12:42' },
            ],
            groupSize: 7, // 每组的元素数量

        }
    },
    computed: {
        groupedItems() {
            const grouped = [];
            for (let i = 0; i < this.tableC.length; i += this.groupSize) {
                grouped.push(this.tableC.slice(i, i + this.groupSize));
            }
            return grouped;
        },
    },
    mounted() {
        this.tableC.map((i, o) => {
            i.index = o + 1
        })
        this.$nextTick(() => {
            this.mc3V = this.$echarts.init(this.$refs.mc3V);
            this.chartInit();
        });
    },
    watch: {
        hIndex: function (infoData) {
            this.chartInit();
        },
        mIndex: function (infoData) {
            this.chartInit();
        },
        dIndex: function (infoData) {
            this.chartInit();
        },
    },
    methods: {
        chartInit() {
            this.loading = true;
            let yAxis = [42, 21, 94, 382, 279, 121, 174, 122, 142, 178, 133, 81]
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '3%',
                    left: '3%',
                    right: '3%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
                    axisLine: {
                        lineStyle: {
                            color: "#cccccccc",
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#eeeeee55",
                        }
                    },
                    axisLabel: {
                        interval: false,
                        width: 80,
                        align: 'center',
                        color: '#fff',
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#eeeeee55",

                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#d5628a' },
                                    { offset: 1, color: '#9769dd' }
                                ]
                            )
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#d5628a55'
                                },
                                {
                                    offset: 1,
                                    color: '#9769dd22'
                                }
                            ])
                        },
                        data: yAxis
                    }
                ]
            };

            this.mc3V.setOption(option)
            this.loading = false;
        },
        phoneHide(phone) {
            let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/;
            phone = phone.replace(reg, '$1****$2');
            return phone;
        },
        cardHide(card) {
            const reg = /^(.{6})(?:\d+)(.{4})$/; // 
            const maskedIdCard = card.replace(reg, '$1******$2');
            return maskedIdCard;
        }
    }
}
</script>

<style lang="scss" scoped>
.mainItem {
    width: 1000px;
    height: 580px;

    .chartV {
        height: 180px;
        width: 1000px;
        position: absolute;
        top: 15px;
        left: 0;

        #mc3V {
            width: 100%;
            height: 100%;
        }
    }

    .tableV {
        width: 960px;
        height: 350px;
        box-shadow: inset 0 0 12px #000;
        position: absolute;
        top: 210px;
        left: 20px;
        border-radius: 12px;
        overflow: hidden;

        .tableVt {
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 40px;
            color: #fff;
            font-family: 'SJYHJT';
            border-radius: 22px 22px 0 0;
            margin-top: 8px;
            background: linear-gradient(to right, #00000000 1%, #40455c66 2%, #40455c66 98%, #00000000 100%);
            box-shadow: 0 4px 6px #00000066;
        }

        .tableVc {
            max-height: 260px;
            height: 260px;
            padding: 10px;

            .tableVcis {
                display: flex;
                align-items: center;
                justify-content: space-around;
                min-height: 40px;
                font-family: 'SJYHJT';
                color: #fff;
                position: relative;

                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 2px;
                    background-color: #3a3f53;
                    border-radius: 2px;
                    box-shadow: 0 0 6px #00000066;
                }
            }

            .tableVcis:last-of-type {
                &::after {
                    display: none;
                }
            }
        }

        .tableVti,
        .tableVci {
            text-align: center;
        }

        .tableVti0,
        .tableVci0,
        .tableVti2,
        .tableVci2 {
            width: 80px;
        }

        .tableVti1,
        .tableVci1 {
            width: 120px;
        }

        .tableVti3,
        .tableVci3 {
            width: 180px;
        }

        .tableVti4,
        .tableVci4 {
            width: 140px;
        }

        .tableVti5,
        .tableVci5 {
            width: 160px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tableVti6,
        .tableVci6 {
            width: 180px;
        }
    }
}

.mainItem-footer {
    bottom: -100px;
}
</style>